<template>
    <el-dialog
    title="新增权限"
    :visible.sync="showAddNew"
    width="30%"
    :before-close="handleClose">
    <el-form :model="permissionInfo" :rules="rules" ref="permissionInfo">
        <table>
            <tr>
                <td class="title">权限名称</td>
                <td class="content">
                    <el-form-item prop="permissionName">
                        <el-input v-model="permissionInfo.permissionName"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">父级权限</td>
                <td class="content">
                    {{parentDesc}}
                </td>
            </tr>
            <tr>
                <td class="title">权限描述</td>
                <td class="content">
                    <el-form-item prop="permissionDesc">
                        <el-input v-model="permissionInfo.permissionDesc"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">排列序号</td>
                <td class="content">
                    <el-form-item prop="sortNum">
                    <el-input v-model="permissionInfo.sortNum"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">权限等级</td>
                <td class="content">
                    <!-- <el-input v-model="permissionInfo.permissionLeve"></el-input>    -->
                 <el-select v-model="permissionInfo.permissionLeve" placeholder="请选择">
                    <el-option
                    v-for="item in 5"
                    :key="item"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
                </td>
            </tr>
        </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addNewOne">确 定</el-button>
    </span>
    </el-dialog>

</template>
<script>
export default {
    props: ['showAddNew',"parentid",'parentDesc'],
    data(){
        // 自定义的验证规则
        var checkNum = (rule,value,callBack)=>{
            var re = /[^0-9]/ig;
            //如果为true则表示输入的内容中有非数字,则直接提示错误
            if(re.test(value)){
                 return callBack(new Error('请输入正确数字'));
            }
            callBack();
        }
        return {
            permissionInfo: {},
            rules: {
                permissionName: [
                    {required: true,message:'请输入权限名称',trigger:'blur'},
                    {min:2,message:'名称最少两个字符',trigger:'blur'}
                ],
                permissionDesc: [
                    {required: true,message: '请输入权限描述',trigger:'blur'},
                    {min:4,message:'描述不能少于4个字',trigger:'blur'}
                ],
                sortNum: [
                    {required:true,message:'请输入排序号',trigger:'blur'},
                    {validator:checkNum,trigger:'blur'}
                ]
            }
        }
    },
    methods: {
        handleClose(){
            this.$parent.showAddNew = false;
        },
        addNewOne(){
            this.$refs['permissionInfo'].validate((valid) => {
            if (valid) {
                // 提交新权限
                this.permissionInfo.parentid = this.parentid;
                this.$http.post(this.$apis.addNewPermission,this.permissionInfo)
                .then((resp)=>{
                    console.log(resp);
                })
            } else {
                console.log('还有未验证通过的');
                return false;
            }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
</style>
